<template>
	<div class="resource_box">
		<input type="file" accept=".glb,.fbx" v-show="false" ref='upload_file' @change="handleFileUpload" />
		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
			<el-tab-pane label="低画质" name="1" :disabled='isChange'>
				<div class="add_btns">
					<el-button type='primary' size='small' @click='openAdd()' :disabled='uploadIng'>添加资源</el-button>
				</div>
				<el-table :data="lowPictureQualityList" border>
					<el-table-column prop="code" label="资源编号" align='center'>
						<template slot-scope="scope">
							<el-input @input='hasChanged' v-model='scope.row.code' placeholder='请输入资源编号' style='width: 160px;'></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="packageName" label="资源名" align='center'>
						<template slot-scope="scope">
							<el-input @input='hasChanged' v-model='scope.row.packageName' placeholder='请输入资源名' style='width: 200px;'></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="type" label="资源类型" align='center'>
						<template slot-scope="scope">
							<el-select v-model="scope.row.type" placeholder="请选择资源类型" @change='hasChanged'>
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column prop="packageUrl" label="资源地址" align='center'>
						<template slot-scope="scope">
							<div v-if="scope.row.uploadIng">
								<el-progress :percentage="scope.row.uploadPre *1"></el-progress>
							</div>
							<div v-if="!scope.row.uploadIng">
								<span v-if="scope.row.packageUrl" style="margin: 0 15px 0 0;">已上传</span>
								<el-button @click='openUpload(1,scope.$index)' type='primary' size='small' :disabled='uploadIng'>{{scope.row.packageUrl?'修改':'上传'}}</el-button>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="majorId" label="操作" width='360' align='center'>
						<template slot-scope="scope">
							<el-button type="danger" size='small' @click="openDelete(scope.row,scope.$index)" :disabled='uploadIng'>删除</el-button>
							<el-button type='primary' size='small' @click="openExp(scope.row,scope.$index)">资源说明</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="add_btns add_btns1" v-if="lowPictureQualityList && lowPictureQualityList.length && isChange">
					<el-button type='primary' size='small' @click='checkAdd()' :disabled='uploadIng'>保存</el-button>
				</div>
			</el-tab-pane>
			<el-tab-pane label="中画质" name="2" :disabled='isChange'>
				<div class="add_btns">
					<el-button type='primary' size='small' @click='openAdd()' :disabled='uploadIng'>添加资源</el-button>
				</div>
				<el-table :data="inPictureQualityList" border>
					<el-table-column prop="code" label="资源编号" align='center'>
						<template slot-scope="scope">
							<el-input @input='hasChanged' v-model='scope.row.code' placeholder='请输入资源编号' style='width: 160px;'></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="packageName" label="资源名" align='center'>
						<template slot-scope="scope">
							<el-input @input='hasChanged' v-model='scope.row.packageName' placeholder='请输入资源名' style='width: 200px;'></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="type" label="资源类型" align='center'>
						<template slot-scope="scope">
							<el-select v-model="scope.row.type" placeholder="请选择资源类型" @change='hasChanged'>
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column prop="packageUrl" label="资源地址" align='center'>
						<template slot-scope="scope">
							<div v-if="scope.row.uploadIng">
								<el-progress :percentage="scope.row.uploadPre *1"></el-progress>
							</div>
							<div v-if="!scope.row.uploadIng">
								<span v-if="scope.row.packageUrl" style="margin: 0 15px 0 0;">已上传</span>
								<el-button @click='openUpload(2,scope.$index)' type='primary' size='small' :disabled='uploadIng'>{{scope.row.packageUrl?'修改':'上传'}}</el-button>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="majorId" label="操作" width='360' align='center'>
						<template slot-scope="scope">
							<el-button type="danger" size='small' @click="openDelete(scope.row,scope.$index)" :disabled='uploadIng'>删除</el-button>
							<el-button type='primary' size='small' @click="openExp(scope.row,scope.$index)">资源说明</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="add_btns add_btns1" v-if="inPictureQualityList && inPictureQualityList.length && isChange">
					<el-button type='primary' size='small' @click='checkAdd()' :disabled='uploadIng'>保存</el-button>
				</div>
			</el-tab-pane>
			<el-tab-pane label="高画质" name="3" :disabled='isChange'>
				<div class="add_btns">
					<el-button type='primary' size='small' @click='openAdd()' :disabled='uploadIng'>添加资源</el-button>
				</div>
				<el-table :data="highPictureQualityList" border>
					<el-table-column prop="code" label="资源编号" align='center'>
						<template slot-scope="scope">
							<el-input @input='hasChanged' v-model='scope.row.code' placeholder='请输入资源编号' style='width: 160px;'></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="packageName" label="资源名" align='center'>
						<template slot-scope="scope">
							<el-input @input='hasChanged' v-model='scope.row.packageName' placeholder='请输入资源名' style='width: 200px;'></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="type" label="资源类型" align='center'>
						<template slot-scope="scope">
							<el-select v-model="scope.row.type" placeholder="请选择资源类型" @change='hasChanged'>
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column prop="packageUrl" label="资源地址" align='center'>
						<template slot-scope="scope">
							<div v-if="scope.row.uploadIng">
								<el-progress :percentage="scope.row.uploadPre *1"></el-progress>
							</div>
							<div v-if="!scope.row.uploadIng">
								<span v-if="scope.row.packageUrl" style="margin: 0 15px 0 0;">已上传</span>
								<el-button @click='openUpload(3,scope.$index)' type='primary' size='small' :disabled='uploadIng'>{{scope.row.packageUrl?'修改':'上传'}}</el-button>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="majorId" label="操作" width='360' align='center'>
						<template slot-scope="scope">
							<el-button type="danger" size='small' @click="openDelete(scope.row,scope.$index)" :disabled='uploadIng'>删除</el-button>
							<el-button type='primary' size='small' @click="openExp(scope.row,scope.$index)">资源说明</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="add_btns add_btns1" v-if="highPictureQualityList && highPictureQualityList.length && isChange">
					<el-button type='primary' size='small' @click='checkAdd()' :disabled='uploadIng'>保存</el-button>
				</div>
			</el-tab-pane>
		</el-tabs>
		<el-dialog title="资源说明" :close-on-press-escape='false' :close-on-click-modal='false' :append-to-body='true' width='420px' destroy-on-close :visible.sync="addShow" class='paddingSmall coursedialog'>
			<el-form :model="addForm" :rules="rules" ref='addForm'>
				<el-form-item label="资源说明" :label-width="labelWidth" prop="explains">
					<el-input v-model="addForm.explains" resize='none' type="textarea" :rows="5" placeholder="请输入资源说明" autocomplete="off">
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeExp">取 消</el-button>
				<el-button type="primary" @click="addExp">保 存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { putProgress } from "@/utils/oss.js"
	import { packageSave, packageList } from '@/api/vrResourceDetailPackage.js'
	export default {
		props: {
			vrResourceDetailId: {
				required: true,
				default: ''
			},
		},
		data() {
			return {
				activeName: '1',
				lowPictureQualityList: [],
				inPictureQualityList: [],
				highPictureQualityList: [],
				options: [{
					value: 1,
					label: '场景'
				}, {
					value: 2,
					label: '模型'
				}, {
					value: 3,
					label: '动画'
				}],
				labelWidth: '100px',
				addShow: false,
				addForm: {
					explains: '',
					index: -1,
				},
				rules: {
					explains: [{
						required: true,
						message: '请输入资源说明'
					}],
				},
				upType: '',
				upIndex: -1,
				uploadIng: false,
				isChange: false,
			}
		},
		created() {
			this.getResources();
		},
		mounted() {

		},
		methods: {
			hasChangeOver() {
				this.$emit('changeDoing', false);
				this.isChange = false;
			},
			hasChanged() {
				this.$emit('changeDoing', true);
				this.isChange = true;
			},
			checkAdd() {
				var dataList = [];
				var dataCodes = [];
				var codeCheck = false;
				if(this.activeName == '1') {
					dataList = this.lowPictureQualityList;
				}
				if(this.activeName == '2') {
					dataList = this.inPictureQualityList;
				}
				if(this.activeName == '3') {
					dataList = this.highPictureQualityList;
				}
				var flagArr = dataList.filter(item => {
					if(item.code) {
						if(dataCodes.includes(item.code)) {
							codeCheck = true;
						} else {
							dataCodes.push(item.code)
						}
					}
					return !item.code || !item.pictureQuality || !item.packageName || !item.type || !item.packageUrl
				})
				if(flagArr && flagArr.length) {
					this.$message({
						type: 'error',
						message: '资源内容不完整！'
					})
					return
				}
				if(codeCheck) {
					this.$message({
						type: 'error',
						message: '资源编号不能重复'
					})
					return
				}
				dataList.map(item => {
					item.vrResourceDetailId = this.vrResourceDetailId
				})
				var data = {
					vrResourceDetailId :this.vrResourceDetailId,
					pictureQuality:this.activeName,
					packageReqList :dataList
				}
				packageSave(data).then(res => {
					if(res.code == '200') {
						this.$message({
							type: 'success',
							message: res.message
						})
						this.hasChangeOver();
					} else {
						this.$message({
							type: 'error',
							message: res.message
						})
					}
				})

			},
			openUpload(type, index) {
				this.upType = type;
				this.upIndex = index;
				this.$refs.upload_file.click()
			},
			handleFileUpload(event) {
				if(event.target.files && event.target.files.length > 0) {
					var file = event.target.files[0];
					this.uploadIng = true;
					if(this.upType == '1') {
						this.lowPictureQualityList[this.upIndex].uploadPre = 0;
						this.lowPictureQualityList[this.upIndex].uploadIng = true;
					}
					if(this.upType == '2') {
						this.inPictureQualityList[this.upIndex].uploadPre = 0;
						this.inPictureQualityList[this.upIndex].uploadIng = true;
					}
					if(this.upType == '3') {
						this.highPictureQualityList[this.upIndex].uploadPre = 0;
						this.highPictureQualityList[this.upIndex].uploadIng = true;
					}
					const key = `szhjxpt/vrresource/${file.name}`;
					putProgress(key, file, ((progress) => {
						if(this.upType == '1') {
							this.lowPictureQualityList[this.upIndex].uploadPre = parseInt(progress * 100);
						}
						if(this.upType == '2') {
							this.inPictureQualityList[this.upIndex].uploadPre = parseInt(progress * 100);
						}
						if(this.upType == '3') {
							this.highPictureQualityList[this.upIndex].uploadPre = parseInt(progress * 100);
						}
					})).then(res => {
						if(this.upType == '1') {
							this.lowPictureQualityList[this.upIndex].uploadIng = false;
							this.lowPictureQualityList[this.upIndex].uploadPre = 100;
							this.lowPictureQualityList[this.upIndex].packageUrl = key;
						}
						if(this.upType == '2') {
							this.inPictureQualityList[this.upIndex].uploadIng = false;
							this.inPictureQualityList[this.upIndex].uploadPre = 100;
							this.inPictureQualityList[this.upIndex].packageUrl = key;
						}
						if(this.upType == '3') {
							this.highPictureQualityList[this.upIndex].uploadIng = false;
							this.highPictureQualityList[this.upIndex].uploadPre = 100;
							this.highPictureQualityList[this.upIndex].packageUrl = key;
						}
						this.uploadIng = false;
						this.upType = '';
						this.upIndex = -1;
						this.$refs.upload_file.value = '';
						this.hasChanged();
					})
				}
			},
			openDelete(item, index) {
				if(this.activeName == '1') {
					this.lowPictureQualityList.splice(index, 1)
				}
				if(this.activeName == '2') {
					this.inPictureQualityList.splice(index, 1)
				}
				if(this.activeName == '3') {
					this.highPictureQualityList.splice(index, 1)
				}
				this.hasChanged();
			},
			openAdd() {
				if(this.activeName == '1') {
					this.lowPictureQualityList.unshift({
						pictureQuality: 1,
						code: '',
						packageName: '',
						type: '',
						packageUrl: '',
						explains: '',
						uploadIng: false,
						uploadPre: 0,
					})
				}
				if(this.activeName == '2') {
					this.inPictureQualityList.unshift({
						pictureQuality: 2,
						code: '',
						packageName: '',
						type: '',
						packageUrl: '',
						explains: '',
						uploadIng: false,
						uploadPre: 0,
					})
				}
				if(this.activeName == '3') {
					this.highPictureQualityList.unshift({
						pictureQuality: 3,
						code: '',
						packageName: '',
						type: '',
						packageUrl: '',
						explains: '',
						uploadIng: false,
						uploadPre: 0,
					})
				}
				this.hasChanged();
			},
			openExp(item, index) {
				this.addForm.explains = item.explains || '';
				this.addForm.index = index;
				this.addShow = true;
			},
			addExp() {
				if(this.activeName == '1') {
					var addInfo = Object.assign({}, this.lowPictureQualityList[this.addForm.index], {
						explains: this.addForm.explains
					})
					this.$set(this.lowPictureQualityList, this.addForm.index, addInfo)
				}
				if(this.activeName == '2') {
					var addInfo = Object.assign({}, this.inPictureQualityList[this.addForm.index], {
						explains: this.addForm.explains
					})
					this.$set(this.inPictureQualityList, this.addForm.index, addInfo)
				}
				if(this.activeName == '3') {
					var addInfo = Object.assign({}, this.highPictureQualityList[this.addForm.index], {
						explains: this.addForm.explains
					})
					this.$set(this.highPictureQualityList, this.addForm.index, addInfo)
				}
				this.closeExp();
				this.hasChanged();
			},
			closeExp() {
				this.addForm = {
					explains: '',
					index: -1,
				}
				this.$nextTick(() => {
					this.$refs.addForm.clearValidate();
					this.addShow = false;
				})
			},
			getResources() {
				packageList({
					vrResourceDetailId: this.vrResourceDetailId
				}).then(res => {
					var lowPictureQualityList = [];
					res.data.lowPictureQualityList.map(item => {
						item.uploadIng = false;
						item.uploadPre = 0;
						lowPictureQualityList.push(item)
					})
					this.lowPictureQualityList = lowPictureQualityList;
					//
					var inPictureQualityList = [];
					res.data.inPictureQualityList.map(item => {
						item.uploadIng = false;
						item.uploadPre = 0;
						inPictureQualityList.push(item)
					})
					this.inPictureQualityList = inPictureQualityList;
					//
					var highPictureQualityList = [];
					res.data.highPictureQualityList.map(item => {
						item.uploadIng = false;
						item.uploadPre = 0;
						highPictureQualityList.push(item)
					})
					this.highPictureQualityList = highPictureQualityList;
				})
			},
			handleClick(tab, event) {
				console.log(this.activeName)
				console.log(tab, event)
			},
		}
	}
</script>
<style type="text/css" scoped="scoped">
	.resource_box {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20px;
	}
	
	.add_btns {
		height: auto;
		padding: 0 0 10px 0;
		text-align: right;
	}
	
	.add_btns1 {
		padding: 15px 0 0 0;
	}
</style>